
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Usage with React · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="ExampleTodoList.html" />
    
    
    <link rel="prev" href="DataFlow.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    Read Me
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../introduction/">
            
                <a href="../introduction/">
            
                    
                    Introduction
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="../introduction/Motivation.html">
            
                <a href="../introduction/Motivation.html">
            
                    
                    Motivation
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="../introduction/CoreConcepts.html">
            
                <a href="../introduction/CoreConcepts.html">
            
                    
                    Core Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="../introduction/ThreePrinciples.html">
            
                <a href="../introduction/ThreePrinciples.html">
            
                    
                    Three Principles
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="../introduction/PriorArt.html">
            
                <a href="../introduction/PriorArt.html">
            
                    
                    Prior Art
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.5" data-path="../introduction/Ecosystem.html">
            
                <a href="../introduction/Ecosystem.html">
            
                    
                    Ecosystem
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.6" data-path="../introduction/Examples.html">
            
                <a href="../introduction/Examples.html">
            
                    
                    Examples
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="./">
            
                <a href="./">
            
                    
                    Basics
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="Actions.html">
            
                <a href="Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="Reducers.html">
            
                <a href="Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="Store.html">
            
                <a href="Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="DataFlow.html">
            
                <a href="DataFlow.html">
            
                    
                    Data Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.3.5" data-path="UsageWithReact.html">
            
                <a href="UsageWithReact.html">
            
                    
                    Usage with React
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="ExampleTodoList.html">
            
                <a href="ExampleTodoList.html">
            
                    
                    Example: Todo List
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../advanced/">
            
                <a href="../advanced/">
            
                    
                    Advanced
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="../advanced/AsyncActions.html">
            
                <a href="../advanced/AsyncActions.html">
            
                    
                    Async Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="../advanced/AsyncFlow.html">
            
                <a href="../advanced/AsyncFlow.html">
            
                    
                    Async Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="../advanced/Middleware.html">
            
                <a href="../advanced/Middleware.html">
            
                    
                    Middleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="../advanced/UsageWithReactRouter.html">
            
                <a href="../advanced/UsageWithReactRouter.html">
            
                    
                    Usage with React Router
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="../advanced/ExampleRedditAPI.html">
            
                <a href="../advanced/ExampleRedditAPI.html">
            
                    
                    Example: Reddit API
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.6" >
            
                <span>
            
                    
                    Next Steps
            
                </span>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../recipes/">
            
                <a href="../recipes/">
            
                    
                    Recipes
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="../recipes/MigratingToRedux.html">
            
                <a href="../recipes/MigratingToRedux.html">
            
                    
                    Migrating to Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="../recipes/UsingObjectSpreadOperator.html">
            
                <a href="../recipes/UsingObjectSpreadOperator.html">
            
                    
                    Using Object Spread Operator
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="../recipes/ReducingBoilerplate.html">
            
                <a href="../recipes/ReducingBoilerplate.html">
            
                    
                    Reducing Boilerplate
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="../recipes/ServerRendering.html">
            
                <a href="../recipes/ServerRendering.html">
            
                    
                    Server Rendering
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="../recipes/WritingTests.html">
            
                <a href="../recipes/WritingTests.html">
            
                    
                    Writing Tests
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="../recipes/ComputingDerivedData.html">
            
                <a href="../recipes/ComputingDerivedData.html">
            
                    
                    Computing Derived Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.7" data-path="../recipes/ImplementingUndoHistory.html">
            
                <a href="../recipes/ImplementingUndoHistory.html">
            
                    
                    Implementing Undo History
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.8" data-path="../recipes/IsolatingSubapps.html">
            
                <a href="../recipes/IsolatingSubapps.html">
            
                    
                    Isolating Subapps
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9" data-path="../recipes/StructuringReducers.html">
            
                <a href="../recipes/StructuringReducers.html">
            
                    
                    Structuring Reducers
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.9.1" data-path="../recipes/reducers/PrerequisiteConcepts.html">
            
                <a href="../recipes/reducers/PrerequisiteConcepts.html">
            
                    
                    Prerequisite Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.2" data-path="../recipes/reducers/BasicReducerStructure.html">
            
                <a href="../recipes/reducers/BasicReducerStructure.html">
            
                    
                    Basic Reducer Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.3" data-path="../recipes/reducers/SplittingReducerLogic.html">
            
                <a href="../recipes/reducers/SplittingReducerLogic.html">
            
                    
                    Splitting Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.4" data-path="../recipes/reducers/RefactoringReducersExample.html">
            
                <a href="../recipes/reducers/RefactoringReducersExample.html">
            
                    
                    Refactoring Reducers Example
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.5" data-path="../recipes/reducers/UsingCombineReducers.html">
            
                <a href="../recipes/reducers/UsingCombineReducers.html">
            
                    
                    Using combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.6" data-path="../recipes/reducers/BeyondCombineReducers.html">
            
                <a href="../recipes/reducers/BeyondCombineReducers.html">
            
                    
                    Beyond combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.7" data-path="../recipes/reducers/NormalizingStateShape.html">
            
                <a href="../recipes/reducers/NormalizingStateShape.html">
            
                    
                    Normalizing State Shape
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.8" data-path="../recipes/reducers/UpdatingNormalizedData.html">
            
                <a href="../recipes/reducers/UpdatingNormalizedData.html">
            
                    
                    Updating Normalized Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.9" data-path="../recipes/reducers/ReusingReducerLogic.html">
            
                <a href="../recipes/reducers/ReusingReducerLogic.html">
            
                    
                    Reusing Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.10" data-path="../recipes/reducers/ImmutableUpdatePatterns.html">
            
                <a href="../recipes/reducers/ImmutableUpdatePatterns.html">
            
                    
                    Immutable Update Patterns
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.11" data-path="../recipes/reducers/InitializingState.html">
            
                <a href="../recipes/reducers/InitializingState.html">
            
                    
                    Initializing State
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5.10" data-path="../recipes/UsingImmutableJS.html">
            
                <a href="../recipes/UsingImmutableJS.html">
            
                    
                    Using Immutable.JS with Redux
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../FAQ.html">
            
                <a href="../FAQ.html">
            
                    
                    FAQ
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="../faq/General.html">
            
                <a href="../faq/General.html">
            
                    
                    General
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="../faq/Reducers.html">
            
                <a href="../faq/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="../faq/OrganizingState.html">
            
                <a href="../faq/OrganizingState.html">
            
                    
                    Organizing State
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="../faq/StoreSetup.html">
            
                <a href="../faq/StoreSetup.html">
            
                    
                    Store Setup
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="../faq/Actions.html">
            
                <a href="../faq/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="../faq/ImmutableData.html">
            
                <a href="../faq/ImmutableData.html">
            
                    
                    Immutable Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="../faq/CodeStructure.html">
            
                <a href="../faq/CodeStructure.html">
            
                    
                    Code Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="../faq/Performance.html">
            
                <a href="../faq/Performance.html">
            
                    
                    Performance
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="../faq/ReactRedux.html">
            
                <a href="../faq/ReactRedux.html">
            
                    
                    React Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.10" data-path="../faq/Miscellaneous.html">
            
                <a href="../faq/Miscellaneous.html">
            
                    
                    Miscellaneous
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../Troubleshooting.html">
            
                <a href="../Troubleshooting.html">
            
                    
                    Troubleshooting
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../Glossary.html">
            
                <a href="../Glossary.html">
            
                    
                    Glossary
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="../api/">
            
                <a href="../api/">
            
                    
                    API Reference
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.9.1" data-path="../api/createStore.html">
            
                <a href="../api/createStore.html">
            
                    
                    createStore
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.2" data-path="../api/Store.html">
            
                <a href="../api/Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.3" data-path="../api/combineReducers.html">
            
                <a href="../api/combineReducers.html">
            
                    
                    combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.4" data-path="../api/applyMiddleware.html">
            
                <a href="../api/applyMiddleware.html">
            
                    
                    applyMiddleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.5" data-path="../api/bindActionCreators.html">
            
                <a href="../api/bindActionCreators.html">
            
                    
                    bindActionCreators
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.6" data-path="../api/compose.html">
            
                <a href="../api/compose.html">
            
                    
                    compose
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.10" data-path="../CHANGELOG.md">
            
                <span>
            
                    
                    Change Log
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.11" data-path="../PATRONS.md">
            
                <span>
            
                    
                    Patrons
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.12" data-path="../Feedback.html">
            
                <a href="../Feedback.html">
            
                    
                    Feedback
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >Usage with React</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="usage-with-react">Usage with React</h1>
<p>From the very beginning, we need to stress that Redux has no relation to React. You can write Redux apps with React, Angular, Ember, jQuery, or vanilla JavaScript.</p>
<p>That said, Redux works especially well with libraries like <a href="http://facebook.github.io/react/" target="_blank">React</a> and <a href="https://github.com/dekujs/deku" target="_blank">Deku</a> because they let you describe UI as a function of <a href="../Glossary.html#state" class="glossary-term" title="">state</a>, and Redux emits <a href="../Glossary.html#state" class="glossary-term" title="">state</a> updates in response to actions.</p>
<p>We will use React to build our simple todo app.</p>
<h2 id="installing-react-redux">Installing React Redux</h2>
<p><a href="https://github.com/reactjs/react-redux" target="_blank">React bindings</a> are not included in Redux by default. You need to install them explicitly:</p>
<pre><code>npm install --save react-redux
</code></pre><p>If you don&apos;t use npm, you may grab the latest UMD build from unpkg (either a <a href="https://unpkg.com/react-redux@latest/dist/react-redux.js" target="_blank">development</a> or a <a href="https://unpkg.com/react-redux@latest/dist/react-redux.min.js" target="_blank">production</a> build). The UMD build exports a global called <code>window.ReactRedux</code> if you add it to your page via a <code>&lt;script&gt;</code> tag.</p>
<h2 id="presentational-and-container-components">Presentational and Container Components</h2>
<p>React bindings for Redux embrace the idea of <strong>separating presentational and container components</strong>. If you&apos;re not familiar with these terms, <a href="https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0" target="_blank">read about them first</a>, and then come back. They are important, so we&apos;ll wait!</p>
<p>Finished reading the article? Let&apos;s recount their differences:</p>
<table>
    <thead>
        <tr>
            <th></th>
            <th scope="col" style="text-align:left">Presentational Components</th>
            <th scope="col" style="text-align:left">Container Components</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <th scope="row" style="text-align:right">Purpose</th>
          <td>How things look (markup, styles)</td>
          <td>How things work (data fetching, <a href="../Glossary.html#state" class="glossary-term" title="">state</a> updates)</td>
        </tr>
        <tr>
          <th scope="row" style="text-align:right">Aware of Redux</th>
          <td>No
          </td><td>Yes
        </td></tr>
        <tr>
          <th scope="row" style="text-align:right">To read data</th>
          <td>Read data from props</td>
          <td>Subscribe to Redux <a href="../Glossary.html#state" class="glossary-term" title="">state</a></td>
        </tr>
        <tr>
          <th scope="row" style="text-align:right">To change data</th>
          <td>Invoke callbacks from props</td>
          <td>Dispatch Redux actions</td>
        </tr>
        <tr>
          <th scope="row" style="text-align:right">Are written</th>
          <td>By hand</td>
          <td>Usually generated by React Redux</td>
        </tr>
    </tbody>
</table>

<p>Most of the components we&apos;ll write will be presentational, but we&apos;ll need to generate a few container components to connect them to the Redux <a href="../Glossary.html#store" class="glossary-term" title="">store</a>. This and the design brief below do not imply container components must be near the top of the component tree. If a container component becomes too complex (i.e. it has heavily nested presentional components with countless callbacks being passed down), introduce another container within the component tree as noted in the <a href="../faq/ReactRedux.html#react-multiple-components">FAQ</a>.</p>
<p>Technically you could write the container components by hand using <a href="../api/Store.html#subscribe"><code>store.subscribe()</code></a>. We don&apos;t advise you to do this because React Redux makes many performance optimizations that are hard to do by hand. For this reason, rather than write container components, we will generate them using the <a href="https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options" target="_blank"><code>connect()</code></a> function provided by React Redux, as you will see below.</p>
<h2 id="designing-component-hierarchy">Designing Component Hierarchy</h2>
<p>Remember how we <a href="Reducers.html">designed the shape of the root state object</a>? It&apos;s time we design the UI hierarchy to match it. This is not a Redux-specific task. <a href="https://facebook.github.io/react/docs/thinking-in-react.html" target="_blank">Thinking in React</a> is a great tutorial that explains the process.</p>
<p>Our design brief is simple. We want to show a list of todo items. On click, a todo item is crossed out as completed. We want to show a field where the user may add a new todo. In the footer, we want to show a toggle to show all, only completed, or only active todos.</p>
<h3 id="designing-presentational-components">Designing Presentational Components</h3>
<p>I see the following presentational components and their props emerge from this brief:</p>
<ul>
<li><strong><code>TodoList</code></strong> is a list showing visible todos.<ul>
<li><code>todos: Array</code> is an array of todo items with <code>{ id, text, completed }</code> shape.</li>
<li><code>onTodoClick(id: number)</code> is a callback to invoke when a todo is clicked.</li>
</ul>
</li>
<li><strong><code>Todo</code></strong> is a single todo item.<ul>
<li><code>text: string</code> is the text to show.</li>
<li><code>completed: boolean</code> is whether todo should appear crossed out.</li>
<li><code>onClick()</code> is a callback to invoke when a todo is clicked.</li>
</ul>
</li>
<li><strong><code>Link</code></strong> is a link with a callback.<ul>
<li><code>onClick()</code> is a callback to invoke when link is clicked.</li>
</ul>
</li>
<li><strong><code>Footer</code></strong> is where we let the user change currently visible todos.</li>
<li><strong><code>App</code></strong> is the root component that renders everything else.</li>
</ul>
<p>They describe the <em>look</em> but don&apos;t know <em>where</em> the data comes from, or <em>how</em> to change it. They only render what&apos;s given to them. If you migrate from Redux to something else, you&apos;ll be able to keep all these components exactly the same. They have no dependency on Redux.</p>
<h3 id="designing-container-components">Designing Container Components</h3>
<p>We will also need some container components to connect the presentational components to Redux. For example, the presentational <code>TodoList</code> component needs a container like <code>VisibleTodoList</code> that subscribes to the Redux <a href="../Glossary.html#store" class="glossary-term" title="">store</a> and knows how to apply the current visibility filter. To change the visibility filter, we will provide a <code>FilterLink</code> container component that renders a <code>Link</code> that dispatches an appropriate <a href="../Glossary.html#action" class="glossary-term" title="">action</a> on click:</p>
<ul>
<li><strong><code>VisibleTodoList</code></strong> filters the todos according to the current visibility filter and renders a <code>TodoList</code>.</li>
<li><strong><code>FilterLink</code></strong> gets the current visibility filter and renders a <code>Link</code>.<ul>
<li><code>filter: string</code> is the visibility filter it represents.</li>
</ul>
</li>
</ul>
<h3 id="designing-other-components">Designing Other Components</h3>
<p>Sometimes it&apos;s hard to tell if some component should be a presentational component or a container. For example, sometimes form and function are really coupled together, such as in case of this tiny component:</p>
<ul>
<li><strong><code>AddTodo</code></strong> is an input field with an &#x201C;Add&#x201D; button</li>
</ul>
<p>Technically we could split it into two components but it might be too early at this stage. It&apos;s fine to mix presentation and logic in a component that is very small. As it grows, it will be more obvious how to split it, so we&apos;ll leave it mixed.</p>
<h2 id="implementing-components">Implementing Components</h2>
<p>Let&apos;s write the components! We begin with the presentational components so we don&apos;t need to think about binding to Redux yet.</p>
<h3 id="implementing-presentational-components">Implementing Presentational Components</h3>
<p>These are all normal React components, so we won&apos;t examine them in detail. We write functional stateless components unless we need to use local <a href="../Glossary.html#state" class="glossary-term" title="">state</a> or the lifecycle methods. This doesn&apos;t mean that presentational components <em>have to</em> be functions&#x2014;it&apos;s just easier to define them this way. If and when you need to add local <a href="../Glossary.html#state" class="glossary-term" title="">state</a>, lifecycle methods, or performance optimizations, you can convert them to classes.</p>
<h4 id="componentstodojs"><code>components/Todo.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React, { PropTypes } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>

<span class="hljs-keyword">const</span> Todo = ({ onClick, completed, text }) =&gt; (
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">li</span>
    <span class="hljs-attr">onClick</span>=<span class="hljs-string">{onClick}</span>
    <span class="hljs-attr">style</span>=<span class="hljs-string">{{textDecoration:</span> <span class="hljs-attr">completed</span> ? &apos;<span class="hljs-attr">line-through</span>&apos; <span class="hljs-attr">:</span> &apos;<span class="hljs-attr">none</span>&apos;}}
  &gt;</span>
    {text}
  <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span>
)

Todo.propTypes = {
  onClick: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Todo
</code></pre>
<h4 id="componentstodolistjs"><code>components/TodoList.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React, { PropTypes } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>
<span class="hljs-keyword">import</span> Todo <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./Todo&apos;</span>

<span class="hljs-keyword">const</span> TodoList = ({todos, onTodoClick}) =&gt; (
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
    {todos.map(todo =&gt;
      <span class="hljs-tag">&lt;<span class="hljs-name">Todo</span>
        <span class="hljs-attr">key</span>=<span class="hljs-string">{todo.id}</span>
        {<span class="hljs-attr">...todo</span>}
        <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =&gt;</span> onTodoClick(todo.id)}
      /&gt;
    )}
  <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
)

TodoList.propTypes = {
  todos: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
  }).isRequired).isRequired,
  onTodoClick: PropTypes.func.isRequired
}

export default TodoList
</span></code></pre>
<h4 id="componentslinkjs"><code>components/Link.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React, { PropTypes } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>

<span class="hljs-keyword">const</span> Link = ({ active, children, onClick }) =&gt; {
  <span class="hljs-keyword">if</span> (active) {
    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{children}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span>
  }

  <span class="hljs-keyword">return</span> (
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>
       <span class="hljs-attr">onClick</span>=<span class="hljs-string">{e</span> =&gt;</span> {
         e.preventDefault()
         onClick()
       }}
    &gt;
      {children}
    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></span>
  )
}

Link.propTypes = {
  active: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired
}

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Link
</code></pre>
<h4 id="componentsfooterjs"><code>components/Footer.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>
<span class="hljs-keyword">import</span> FilterLink <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../containers/FilterLink&apos;</span>

<span class="hljs-keyword">const</span> Footer = () =&gt; (
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
    Show:
    {&quot; &quot;}
    <span class="hljs-tag">&lt;<span class="hljs-name">FilterLink</span> <span class="hljs-attr">filter</span>=<span class="hljs-string">&quot;SHOW_ALL&quot;</span>&gt;</span>
      All
    <span class="hljs-tag">&lt;/<span class="hljs-name">FilterLink</span>&gt;</span>
    {&quot;, &quot;}
    <span class="hljs-tag">&lt;<span class="hljs-name">FilterLink</span> <span class="hljs-attr">filter</span>=<span class="hljs-string">&quot;SHOW_ACTIVE&quot;</span>&gt;</span>
      Active
    <span class="hljs-tag">&lt;/<span class="hljs-name">FilterLink</span>&gt;</span>
    {&quot;, &quot;}
    <span class="hljs-tag">&lt;<span class="hljs-name">FilterLink</span> <span class="hljs-attr">filter</span>=<span class="hljs-string">&quot;SHOW_COMPLETED&quot;</span>&gt;</span>
      Completed
    <span class="hljs-tag">&lt;/<span class="hljs-name">FilterLink</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>
)

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Footer
</code></pre>
<h4 id="componentsappjs"><code>components/App.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>
<span class="hljs-keyword">import</span> Footer <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./Footer&apos;</span>
<span class="hljs-keyword">import</span> AddTodo <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../containers/AddTodo&apos;</span>
<span class="hljs-keyword">import</span> VisibleTodoList <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../containers/VisibleTodoList&apos;</span>

<span class="hljs-keyword">const</span> App = () =&gt; (
  &lt;div&gt;
    &lt;AddTodo /&gt;
    &lt;VisibleTodoList /&gt;
    &lt;Footer /&gt;
  &lt;/div&gt;
)

export default App
</code></pre>
<h3 id="implementing-container-components">Implementing Container Components</h3>
<p>Now it&apos;s time to hook up those presentational components to Redux by creating some containers. Technically, a container component is just a React component that uses <a href="../api/Store.html#subscribe"><code>store.subscribe()</code></a> to read a part of the Redux <a href="../Glossary.html#state" class="glossary-term" title="">state</a> tree and supply props to a presentational component it renders. You could write a container component by hand, but we suggest instead generating container components with the React Redux library&apos;s <a href="https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options" target="_blank"><code>connect()</code></a> function, which provides many useful optimizations to prevent unnecessary re-renders. (One result of this is that you shouldn&apos;t have to worry about the <a href="https://facebook.github.io/react/docs/advanced-performance.html" target="_blank">React performance suggestion</a> of implementing <code>shouldComponentUpdate</code> yourself.)</p>
<p>To use <code>connect()</code>, you need to define a special function called <code>mapStateToProps</code> that tells how to transform the current Redux <a href="../Glossary.html#store" class="glossary-term" title="">store</a> <a href="../Glossary.html#state" class="glossary-term" title="">state</a> into the props you want to pass to a presentational component you are wrapping. For example, <code>VisibleTodoList</code> needs to calculate <code>todos</code> to pass to the <code>TodoList</code>, so we define a function that filters the <code>state.todos</code> according to the <code>state.visibilityFilter</code>, and use it in its <code>mapStateToProps</code>:</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> getVisibleTodos = (todos, filter) =&gt; {
  <span class="hljs-keyword">switch</span> (filter) {
    <span class="hljs-keyword">case</span> <span class="hljs-string">&apos;SHOW_ALL&apos;</span>:
      <span class="hljs-keyword">return</span> todos
    <span class="hljs-keyword">case</span> <span class="hljs-string">&apos;SHOW_COMPLETED&apos;</span>:
      <span class="hljs-keyword">return</span> todos.filter(t =&gt; t.completed)
    <span class="hljs-keyword">case</span> <span class="hljs-string">&apos;SHOW_ACTIVE&apos;</span>:
      <span class="hljs-keyword">return</span> todos.filter(t =&gt; !t.completed)
  }
}

<span class="hljs-keyword">const</span> mapStateToProps = (state) =&gt; {
  <span class="hljs-keyword">return</span> {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}
</code></pre>
<p>In addition to reading the <a href="../Glossary.html#state" class="glossary-term" title="">state</a>, container components can dispatch actions. In a similar fashion, you can define a function called <code>mapDispatchToProps()</code> that receives the <a href="../api/Store.html#dispatch"><code>dispatch()</code></a> method and returns callback props that you want to inject into the presentational component. For example, we want the <code>VisibleTodoList</code> to inject a prop called <code>onTodoClick</code> into the <code>TodoList</code> component, and we want <code>onTodoClick</code> to dispatch a <code>TOGGLE_TODO</code> <a href="../Glossary.html#action" class="glossary-term" title="">action</a>:</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> mapDispatchToProps = (dispatch) =&gt; {
  <span class="hljs-keyword">return</span> {
    onTodoClick: (id) =&gt; {
      dispatch(toggleTodo(id))
    }
  }
}
</code></pre>
<p>Finally, we create the <code>VisibleTodoList</code> by calling <code>connect()</code> and passing these two functions:</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>

<span class="hljs-keyword">const</span> VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> VisibleTodoList
</code></pre>
<p>These are the basics of the React Redux API, but there are a few shortcuts and power options so we encourage you to check out <a href="https://github.com/reactjs/react-redux" target="_blank">its documentation</a> in detail. In case you are worried about <code>mapStateToProps</code> creating new objects too often, you might want to learn about <a href="../recipes/ComputingDerivedData.html">computing derived data</a> with <a href="https://github.com/reactjs/reselect" target="_blank">reselect</a>.</p>
<p>Find the rest of the container components defined below:</p>
<h4 id="containersfilterlinkjs"><code>containers/FilterLink.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>
<span class="hljs-keyword">import</span> { setVisibilityFilter } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../actions&apos;</span>
<span class="hljs-keyword">import</span> Link <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../components/Link&apos;</span>

<span class="hljs-keyword">const</span> mapStateToProps = (state, ownProps) =&gt; {
  <span class="hljs-keyword">return</span> {
    active: ownProps.filter === state.visibilityFilter
  }
}

<span class="hljs-keyword">const</span> mapDispatchToProps = (dispatch, ownProps) =&gt; {
  <span class="hljs-keyword">return</span> {
    onClick: () =&gt; {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}

<span class="hljs-keyword">const</span> FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> FilterLink
</code></pre>
<h4 id="containersvisibletodolistjs"><code>containers/VisibleTodoList.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>
<span class="hljs-keyword">import</span> { toggleTodo } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../actions&apos;</span>
<span class="hljs-keyword">import</span> TodoList <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../components/TodoList&apos;</span>

<span class="hljs-keyword">const</span> getVisibleTodos = (todos, filter) =&gt; {
  <span class="hljs-keyword">switch</span> (filter) {
    <span class="hljs-keyword">case</span> <span class="hljs-string">&apos;SHOW_ALL&apos;</span>:
      <span class="hljs-keyword">return</span> todos
    <span class="hljs-keyword">case</span> <span class="hljs-string">&apos;SHOW_COMPLETED&apos;</span>:
      <span class="hljs-keyword">return</span> todos.filter(t =&gt; t.completed)
    <span class="hljs-keyword">case</span> <span class="hljs-string">&apos;SHOW_ACTIVE&apos;</span>:
      <span class="hljs-keyword">return</span> todos.filter(t =&gt; !t.completed)
  }
}

<span class="hljs-keyword">const</span> mapStateToProps = (state) =&gt; {
  <span class="hljs-keyword">return</span> {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

<span class="hljs-keyword">const</span> mapDispatchToProps = (dispatch) =&gt; {
  <span class="hljs-keyword">return</span> {
    onTodoClick: (id) =&gt; {
      dispatch(toggleTodo(id))
    }
  }
}

<span class="hljs-keyword">const</span> VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> VisibleTodoList
</code></pre>
<h3 id="implementing-other-components">Implementing Other Components</h3>
<h4 id="containersaddtodojs"><code>containers/AddTodo.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>
<span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>
<span class="hljs-keyword">import</span> { addTodo } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../actions&apos;</span>

<span class="hljs-keyword">let</span> AddTodo = ({ dispatch }) =&gt; {
  <span class="hljs-keyword">let</span> input

  <span class="hljs-keyword">return</span> (
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">{e</span> =&gt;</span> {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = &apos;&apos;
      }}&gt;
        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{node</span> =&gt;</span> {
          input = node
        }} /&gt;
        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span>&gt;</span>
          Add Todo
        <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo
</span></code></pre>
<h2 id="passing-the-store">Passing the Store</h2>
<p>All container components need access to the Redux <a href="../Glossary.html#store" class="glossary-term" title="">store</a> so they can subscribe to it. One option would be to pass it as a prop to every container component. However it gets tedious, as you have to wire <code>store</code> even through presentational components just because they happen to render a container deep in the component tree.</p>
<p>The option we recommend is to use a special React Redux component called <a href="https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store" target="_blank"><code>&lt;Provider&gt;</code></a> to <a href="https://facebook.github.io/react/docs/context.html" target="_blank">magically</a> make the <a href="../Glossary.html#store" class="glossary-term" title="">store</a> available to all container components in the application without passing it explicitly. You only need to use it once when you render the root component:</p>
<h4 id="indexjs"><code>index.js</code></h4>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>
<span class="hljs-keyword">import</span> { render } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>
<span class="hljs-keyword">import</span> { Provider } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>
<span class="hljs-keyword">import</span> { createStore } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;redux&apos;</span>
<span class="hljs-keyword">import</span> todoApp <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./reducers&apos;</span>
<span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./components/App&apos;</span>

<span class="hljs-keyword">let</span> store = createStore(todoApp)

render(
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Provider</span> <span class="hljs-attr">store</span>=<span class="hljs-string">{store}</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">App</span> /&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">Provider</span>&gt;</span>,
  document.getElementById(&apos;root&apos;)
)
</span></code></pre>
<h2 id="next-steps">Next Steps</h2>
<p>Read the <a href="ExampleTodoList.html">complete source code for this tutorial</a> to better internalize the knowledge you have gained. Then, head straight to the <a href="../advanced/">advanced tutorial</a> to learn how to handle network requests and routing!</p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="DataFlow.html" class="navigation navigation-prev " aria-label="Previous page: Data Flow">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="ExampleTodoList.html" class="navigation navigation-next " aria-label="Next page: Example: Todo List">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"Usage with React","level":"1.3.5","depth":2,"next":{"title":"Example: Todo List","level":"1.3.6","depth":2,"path":"basics/ExampleTodoList.md","ref":"./basics/ExampleTodoList.md","articles":[]},"previous":{"title":"Data Flow","level":"1.3.4","depth":2,"path":"basics/DataFlow.md","ref":"./basics/DataFlow.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["livereload"],"pluginsConfig":{"livereload":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"basics/UsageWithReact.md","mtime":"2017-03-15T14:45:26.919Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-03-15T14:47:19.389Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

